<!-- eslint-disable prettier/prettier -->
<!-- 用户编辑弹窗 -->
<template>
	<ele-modal
		:width="750"
		:visible="visible"
		:confirm-loading="loading"
		:title="actionStatus == 'edit' ? '修改' : '新建'"
		:body-style="{ paddingBottom: '8px' }"
		@update:visible="updateVisible"
		@ok="save"
	>
		<a-form :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }" :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }">
			<a-row :gutter="24">
				<a-col :md="20" :sm="24" :xs="24">
					<!-- <a-form-item label="调出位置" v-bind="validateInfos.come_type_code">
						<a-select
							optionFilterProp="label"
							:options="cangku"
							allow-clear
							v-model:value="form.come_type_code"
							placeholder="请选择调出位置"
							@change="cangkuChange"
							autocomplete="off"
						/>
					</a-form-item>
					<a-form-item label="分配位置">
						<a-select
							optionFilterProp="label"
							:options="store"
							allow-clear
							v-model:value="form.to_type"
							placeholder="请选择分配位置"
							@change="storeChange"
							autocomplete="off"
						/>
					</a-form-item>
					<template v-if="showGuizu">
						<a-form-item label="门店1">
							<a-select
								optionFilterProp="label"
								:options="mendian"
								allow-clear
								v-model:value="store_code"
								placeholder="请选择门店"
								@change="mendianChange2"
								autocomplete="off"
							/>
						</a-form-item>
						<a-form-item label="柜组1">
							<a-select
								optionFilterProp="label"
								:options="guizu"
								allow-clear
								v-model:value="guizu_name"
								placeholder="请选择柜组"
								@change="guizuChange"
								autocomplete="off"
							/>
						</a-form-item>
					</template>
					<a-form-item label="门店2" v-if="showMendian">
						<a-select
							optionFilterProp="label"
							:options="mendian"
							allow-clear
							v-model:value="form.to_type_code"
							placeholder="请选择门店"
							@change="mendianChange"
							autocomplete="off"
						/>
					</a-form-item> -->
					<a-form-item label="调出门店">
						<a-select
						:disabled="actionStatus == 'edit'"
							optionFilterProp="label"
							:options="mendian"
							allow-clear
							v-model:value="store_code"
							placeholder="请选择调出门店1"
							@change="mendianChange"
							autocomplete="off"
						/>
					</a-form-item>
					<a-form-item label="调出柜组">
						<a-select
						:disabled="actionStatus == 'edit'"
							optionFilterProp="label"
							:options="guizu"
							allow-clear
							v-model:value="come_type_name"
							placeholder="请选择调出柜组"
							@change="cangkuChange"
							autocomplete="off"
						/>
					</a-form-item>
					<a-form-item label="调入柜组">
						<a-select
						:disabled="actionStatus == 'edit'"
							optionFilterProp="label"
							:options="guizu"
							allow-clear
							v-model:value="to_type_name"
							placeholder="请选择调入柜组"
							@change="guizuChange"
							autocomplete="off"
						/>
					</a-form-item>
					<a-form-item label="业务日期">
						<a-date-picker class="ele-fluid" valueFormat="YYYY/MM/DD" placeholder="请选择业务日期" v-model:value="form.business_time" autocomplete="off" />
					</a-form-item>
					<a-form-item label="制单人">
						<a-select
							optionFilterProp="label"
							:options="caigouyuan"
							allow-clear
							v-model:value="make_user"
							placeholder="请选择制单人"
							@change="makeUserChange"
							autocomplete="off"
						/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';

  import {
    get_warehouse_list,
    get_store_list,
    get_store_group_list,
    get_user_list
  } from '@/api/jewelry/receipts_purchase';
  import { receipts_purchase_detail } from '@/api/jewelry/receipts_group';

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    // 编辑edit/新建add
    actionStatus: String,
    // 编辑数据id
    editData: Object,
    storeCode: String
  });

  const emit = defineEmits(['done', 'update:visible']);

  // 提交状态
  const loading = ref(false);
  const cangku = ref([]);
  const store = ref([
    { label: '门店', value: '2' },
    { label: '柜组', value: '3' }
  ]);
  const showGuizu = ref(false);
  const guizu = ref([]);
  const showMendian = ref(false);
  const mendian = ref([]);
  const caigouyuan = ref([]);
  const category = ref([]);
  const supplier = ref([]);
  const to_type_code2 = ref(null);
  const purchase_user = ref(null);
  const make_user = ref(null);
  const store_code = ref(null);
  const to_type_name = ref(null);
  const come_type_name = ref(null);

  onMounted(async () => {
    console.log(props.editData);
    form.store_code = props.storeCode;
    await get_warehouse_list({ page: 1, limit: 5000 }).then((res) => {
      cangku.value = res.list.map((item) => {
        return {
          value: String(item.code),
          label: item.name
        };
      });
    });
    await get_store_list({ page: 1, limit: 5000 }).then((res) => {
      mendian.value = res.list.map((item) => {
        return {
          value: String(item.code),
          label: item.name
        };
      });
    });
    await get_user_list({ page: 1, limit: 5000 }).then((res) => {
      caigouyuan.value = res.list.map((item) => {
        return {
          value: String(item.id),
          label: item.name
        };
      });
    });
    if (props.editData.code) {
      form.code = props.editData.code;
      await receipts_purchase_detail({ code: props.editData.code }).then(
        (res) => {
          console.log('res', res);
          Object.keys(form).forEach((key) => {
            form[key] = res.receipts_detail ? res.receipts_detail[key] : '';
          });
          purchase_user.value = res.receipts_detail?.purchase_user_name;
          make_user.value = res.receipts_detail?.make_user_name;
          store_code.value = res.receipts_detail?.store_code;
          come_type_name.value = res.receipts_detail?.come_type_name;
          to_type_name.value = res.receipts_detail?.to_type_name;
          if (form.to_type == 3) {
            showGuizu.value = true;
            showMendian.value = false;
          } else if (form.to_type == 2) {
            showMendian.value = true;
            showGuizu.value = false;
          } else {
            showMendian.value = false;
            showGuizu.value = false;
          }
        }
      );
    }
  });

  const getStoreGroup = (store_code) => {
    get_store_group_list({ page: 1, limit: 5000, store_code: store_code }).then(
      async (res) => {
        guizu.value = await res.list.map((item) => {
          return {
            value: String(item.code),
            label: item.name
          };
        });
      }
    );
  };
  /* 更新仓库数据 */
  const cangkuChange = (value) => {
    console.log('调出柜组', value);
    form.come_type_code = value;
    form.to_type_code = null;
  };
  /* 更新分配数据 */
  const storeChange = (value) => {
    console.log('分配位置', value);
    form.to_type = value;
    if (value == 3) {
      showGuizu.value = true;
      showMendian.value = false;
    } else if (value == 2) {
      showMendian.value = true;
      showGuizu.value = false;
    } else {
      showMendian.value = false;
      showGuizu.value = false;
    }
  };
  /* 更新柜组数据 */
  const guizuChange = (value) => {
    console.log('调入柜组', value);
    form.to_type_code = value;
  };
  /* 更新门店数据 */
  const mendianChange = (value) => {
    console.log('门店', value);
    form.come_type_code = '';
    come_type_name.value = '';
    form.to_type_code = '';
    to_type_name.value = '';
    getStoreGroup(value);
  };
  /* 更新采购员数据 */
  const caigouyuanChange = (value) => {
    console.log('采购员', value);
    form.purchase_user_id = value;
  };
  /* 更新制单人数据 */
  const makeUserChange = (value) => {
    console.log('制单人', value);
    form.make_user_id = value;
  };
  /* 更新供应商数据 */
  const supplierChange = (value) => {
    console.log('供应商', value);
    form.supplier_code = value;
  };

  // 表单数据
  const form = reactive({
    code: '',
    store_code: '',
    come_type_code: '',
    to_type: '',
    to_type_code: '',
    business_time: '',
    make_user_id: ''
  });
  // 表单验证规则
  const rules = reactive({
    come_type_code: [
      {
        required: true,
        message: '请选择调出位置',
        trigger: 'change'
      }
    ]
  });

  const { validate, validateInfos } = useForm(form, rules);
  /* 保存编辑 */
  const save = () => {
    validate()
      .then(() => {
        console.log('form', form);
        emit('done', form);
      })
      .catch(() => {});
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
